<template>
  <div class="first-intro">
    <!-- 任务介绍页面 -->

    <span class="tit">{{ selectIntroduceList.name }}</span>
    <span
      class="misLV"
      :class="{
        LvOne: selectIntroduceList.priority <= 100,
        LvTwo:
          (selectIntroduceList.priority <= 200) &
          (selectIntroduceList.priority > 100),
        LvThree: selectIntroduceList.priority > 200,
      }"
      >LV {{ selectIntroduceList.priority }}</span
    >
    <div class="tags">
      <el-tag
        v-for="item in selectIntroduceList.labelVoList"
        :key="item.index"
        size="mini"
        type="info"
        >{{ item.labelName }}</el-tag
      >
    </div>
    <div
      v-if="taskByProjectType === true && usertype === 1"
      class="btnbox btnbox1"
    >
      <button class="edit cancle" @click="changeEdit1" v-if="edit === true">
        取消
      </button>
      <button class="edit" @click="saveEdit(text)" v-if="edit === true">
        完成
      </button>
      <button class="edit" v-if="edit === false" @click="changeEdit">
        编辑
      </button>
    </div>
    <div v-if="taskByProjectType === false" class="btnbox btnbox1">
      <button class="edit cancle" @click="changeEdit1" v-if="edit === true">
        取消
      </button>
      <button class="edit" @click="saveEdit(text)" v-if="edit === true">
        完成
      </button>
      <button class="edit" v-if="edit === false" @click="changeEdit">
        编辑
      </button>
    </div>
    <div class="content">
      <section v-if="edit === false" v-html="text"></section>
      <wang-editor
        :content="text"
        @getEditorContent="getEditorContent"
        v-else
      />
    </div>
    <div class="discreaption">
      <p class="distit">任务附件</p>
      <div v-if="fileList.length < 5">
        <el-upload
          style="display: inline-block"
          :headers="{ token: token }"
          action="http://test.zhihanyixing.com:8084/file/upload"
          :on-success="handleSuccess"
          :before-upload="handleChange"
          :data="{
            userId: userId,
          }"
          :show-file-list="false"
          :limit="6"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <button class="plus" v-if="edit === true" slot="trigger">+</button>
        </el-upload>
      </div>
      <div class="filelist">
        <div v-for="item in fileList.slice(0, 5)" :key="item.id" class="file">
          <img src="@/assets/wenjianleixing-fujian-2.png" alt="" />
          <div class="fileinfo">
            <p class="filetit">{{ item.fileName || item.name }}</p>
            <div v-if="edit === true" class="downbtn">
              <img
                src="@/assets/delete.png"
                @click="removeFile(item.fileId)"
                alt=""
              />
            </div>
            <div v-else class="downbtn">
              <a :href="item.fileUrl" class="el-icon-download"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSelectIntroduce, deleteFile, getSelectType, getSelectTaskByProject, updateTaskSummary } from '@/api/task/task.js';
import WangEditor from '@/components/wang-editor';
export default {
  name: 'first-intro',
  components: {
    WangEditor
  },
  data() {
    return {
      edit: false, // 编辑器控制
      text: '',

      // -------------------------------------------
      selectIntroduceList: {}, // 详情数据
      addTastDto: { // 编辑数据
        fileIdList: [], // 文件id
        content: null, // 富文本内容
        id: parseInt(localStorage.getItem('taskId')), // 任务id------------必传
        userid: parseInt(sessionStorage.getItem('userid')) // 创建人id------------------------必填
      },
      token: sessionStorage.getItem('usertoken'),
      userId: parseInt(sessionStorage.getItem('userid')), // 用户ID
      fileList: [], // 任务附件列表,
      usertype: parseInt(sessionStorage.getItem('usertype')), // 当前用户属性
      selectType: [], // 登录人属性--1执行人员2审核人员3抄送人员4负责人
      taskByProjectType: null // 判断该任务所属的项目是否复制项目
    };
  },
  created() {
    this.getSelectIntroduce();
  },
  methods: {
    // 获取任务介绍
    async getSelectIntroduce() {
      const { data } = await getSelectIntroduce({ id: parseInt(localStorage.getItem('taskId')) });
      this.selectIntroduceList = data;
      this.text = data.content;
      this.addTastDto.content = data.content;
      // console.log(this.selectIntroduceList);
      // 获取当前登录人属性
      const res = await getSelectType({ taskId: parseInt(localStorage.getItem('taskId')), userId: parseInt(sessionStorage.getItem('userid')) });
      // const {data: data4} = await getSelectType({taskId: 1, userId: 1}); // 测试
      this.selectType = res.data;
      // console.log(this.selectType);
      // 获取当前项目属性
      const res1 = await getSelectTaskByProject({ taskId: parseInt(localStorage.getItem('taskId')) });
      this.taskByProjectType = res1.data;
      // console.log(this.taskByProjectType);
      if (data.fileVoList.length > 0) {
        this.addTastDto.fileIdList = [];
        data.fileVoList.forEach(item => {
          this.addTastDto.fileIdList.push(item.fileId);
        });
        this.fileList = data.fileVoList;
      } else {
        this.fileList = [];
      }
      // console.log(this.addTastDto);
    },
    // 获取编辑器的内容
    getEditorContent(data) {
      // console.log('data', data);
      this.text = data;
    },
    // 编辑按钮
    changeEdit() {
      this.edit = !this.edit;
      // this.getEditorContent();
    },
    // 取消按钮
    changeEdit1() {
      this.edit = !this.edit;
    },
    // 完成编辑
    saveEdit(data) {
      this.$confirm('是否完成编辑?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        // console.log(data);
        // console.log(this.addTastDto);
        this.addTastDto.content = data;
        // 发请求
        const res = await updateTaskSummary(this.addTastDto);
        // console.log(res);
        if (res.code === 200) {
          // 提示成功
          this.$message({
            showClose: true,
            message: '编辑成功！',
            type: 'success'
          });
          // 刷新列表
          this.getSelectIntroduce();
          this.edit = !this.edit;
        } else {
          // 提示失败
          this.$message({
            showClose: true,
            message: '编辑失败，请稍后重试！',
            type: 'error'
          });
        }
      }).catch(() => {
        this.$message({
          showClose: true,
          type: 'info',
          message: '继续编辑'
        });
      });
    },

    // ----------------------------------------

    handleExceed(files, fileList) {
      this.$message({
        showClose: true,
        message: `当前限制选择 5 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`,
        type: 'warning'
      });
    },
    // 删除文件
    removeFile(id) {
      // console.log(id);
      this.$confirm('确定要删除该附件吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await deleteFile({ fileId: id });
        if (res.code === 200) {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success'
          });
          this.getSelectIntroduce();
          // console.log(this.fileList);
        } else {
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'error'
          });
        }
        // console.log(this.fileList);
      }).catch((err) => {
        console.log(err);
      });
    },
    handleChange(file) {
      let flag = true;
      this.fileList.forEach(item => {
        if (item.size === file.size) {
          flag = false;
          return this.$message({
            showClose: true,
            message: '请不要重复上传附件！',
            type: 'warning'
          });
        }
      });
      if (!flag) {
        if (!flag) return Promise.reject(flag); // 正确的终止
      }
    },
    handleSuccess(res, file, fileList) {
      // console.log('12312313', res, file);
      // console.log(fileList);
      if (res.code === 200) {
        this.fileList = fileList;
        this.addTastDto.fileIdList.push(res.data.id);
        this.$message({
          showClose: true,
          type: 'success',
          message: res.msg
        });
      } else {
        return this.$message({
          showClose: true,
          type: 'error',
          message: res.msg
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__header {
  padding: 0;
}
/deep/ .upload-demo {
  height: 0;
}
.first-intro {
  margin-top: -1px;
  background: white;
  width: 98%;
  box-shadow: 0px 1px 3px 0px rgba(153, 153, 153, 0.5),
    1px -1px 3px 0px rgba(153, 153, 153, 0.5);
  text-align: center;
  padding: 20px;
  .tit {
    font-size: 20px;
    font-weight: 400;
    color: #111;
  }
  .misLV {
    height: 24px;
    width: 80px;
    font-size: 12px;
    font-family: SukhumvitSet-Bold;
    background-color: #e8f8ec;
    text-align: center;
    line-height: 24px;
    display: inline-block;
    border-radius: 12px;
    margin-left: 15px;
    color: #fff;
  }
  .LvOne {
    background: #c5f5d1;
  }
  .LvTwo {
    background: #f7cbd2;
  }
  .LvThree {
    background: #cbd5f5;
  }
  .tags {
    height: 19px;
    margin: 10px 0 20px 0;
    .el-tag + .el-tag {
      margin-left: 10px;
    }
    .button-new-tag {
      margin-left: 10px;
      height: 32px;
      line-height: 30px;
      padding-top: 0;
      padding-bottom: 0;
    }
    .input-new-tag {
      width: 90px;
      margin-left: 10px;
      vertical-align: bottom;
    }
  }
  .btnbox {
    position: absolute;
    right: 20px;
    top: 50px;
    .edit {
      cursor: pointer;
      width: 100px;
      height: 35px;
      line-height: 35px;
      background-color: #2fc0e0;
      color: #fff;
      font-size: 16px;
      border-radius: 5px;
    }
    .cancle {
      cursor: pointer;
      background-color: #e8f8fb;
      color: #2fc0e0;
      margin-right: 31px;
    }
  }
  .btnbox1 {
    top: 100px;
  }
  .content {
    width: 100%;
    // min-height: 611px;
    background: #ffffff;

    section {
      width: 100%;
      height: 611px;
      margin: 0 auto;
      margin-top: 16px;
      border: 1px solid #dae1fd;
      background: #ffffff;
      overflow: auto;
    }
    /deep/ .w-e-text {
      min-height: 560px !important;
    }
  }

  .discreaption {
    text-align: left;
    position: relative;
    margin-bottom: 32px;
    .distit {
      font-size: 16px;
    }
    .disbox {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3; /* 可以显示的行数，超出部分用...表示*/
      -webkit-box-orient: vertical;
      width: 96.5%;
      height: 168px;
      padding: 19px 30px;
      font-size: 14px;
      color: #555;
      font-weight: 400;
      border: 1px solid #f1f4ff;
      outline: none;
    }
    .disbox1 {
      height: 44px;
    }
    .disbox:focus {
      box-shadow: inset 0px 1px 4px 0px #2fc0e0, inset 0px -1px 4px 0px #2fc0e0,
        inset 1px 0px 4px 0px #2fc0e0, inset -1px 0px 4px 0px #2fc0e0;
    }
    .plus {
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border-radius: 15px;
      background-color: #e8f8fb;
      font-size: 36px;
      color: #2fc0e0;
      padding: 0;
      cursor: pointer;
      position: absolute;
      left: 80px;
      top: -5px;
    }
    .filelist {
      display: flex;
      .file {
        display: flex;
        width: 315px;
        margin-right: 71px;
        padding-top: 10px;
        height: 84px;
        box-sizing: border-box;
        background-color: #fff;
        border: 1px solid #e6ebff;
        border-radius: 8px;
        img {
          width: 48px;
          height: 48px;
          margin: 8px;
        }
        .fileinfo {
          display: flex;
          p {
            width: 150px;
            font-size: 16px;
            color: #333;
            margin: 10px;
            margin-right: 20px;
            overflow: hidden;
          }
          .downbtn {
            img {
              width: 36px;
              height: 36px;
              border-radius: 50%;
              margin: 17px 9px;
            }
            a {
              display: inline-block;
              width: 36px;
              height: 36px;
              border-radius: 18px;
              text-align: center;
              line-height: 36px;
              font-size: 28px;
              color: #2fc0e0;
              background-color: #e8f8fb;
              margin-top: 13px;
              margin-left: 15px;
            }
          }
        }
      }
    }
  }
}
</style>
